@import 'css/config.scss';
.home_page-head {
    display: flex;
    align-items: center;
    height: 100vh;
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px 20px;
    background: #0D0D0E;
    transition: all 0.3s ease;
    z-index: 22;
    // border-right: 1px #26262C solid;
    border-width: 0px 1px 0px 0px;
    border-style: solid;
    border-image: linear-gradient(180deg, rgba(38, 38, 38, 0) 0%, #262626 57%, rgba(38, 38, 38, 0) 100%) 0 0 0 1;
    position: relative;
    &::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        background: linear-gradient(180deg, rgba(38, 38, 38, 0) 0%, #262626 57%, rgba(38, 38, 38, 0) 100%);
    }

    .home_page-head-top {
        width: 100%;
        display: flex;
        flex-direction: column;
        .home_page-logo {
            margin-bottom: 48px;
            padding: 0 0px;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            transition: all 0.3s ease;
            .home_page-logo-img {
                height: 21.25px;
                width: auto;
               
            }
            .home_page-logo-img-text-overflow {
                margin-left: 6px;
                transition: all 0.3s ease;
                width:109px;
                height: 14.56px;
                overflow: hidden;
                img {
                    display: block;
                    width: 108.3px;
                    height: 14.56px;
                }
            }
           
        }
        
        .home_page-menu-list {
            width: 100%;
            color: #686B86;
            li {
                padding: 10px;
                margin-bottom: 8px;
                display: flex;
                
                align-items: center;
                cursor: pointer;
                background: transparent;
                transition: all 0.3s ease;
                position: relative;
                background: #0D0D0E;
                border-radius: 8px;
                color: #FAFAFC;

                p {
                    font-family: Roboto;
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 14px;
                    white-space: nowrap;
                    width: 50px;
                    transition: all 0.3s ease;
                    overflow: hidden;
                    position: absolute;
                    left: 38px;
                }

                // svg {path {transition: all 0.3s ease;}}
            }
            li.active {
                // color: #FAFAFC;
                background: #33333A;
                
            }
            
        }
        
    }
    .home_page-head-bottom {
        display: flex;
        width: 100%;
        .language-button {
            cursor: pointer;
            display: flex;
            margin-right: 40px;
            p {
                color: #383838;
            }
            span {
                color: #fff;
                margin: 0 4px;
            }
            .lang-button-active {
                color: #FFFFFF
            }
        }
        .user-avatar {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
           
           
            .head-img {
                width: 30px;
                height: 30px;
                border-radius: 100%;
                background: $primary-color;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .head-name {
                font-family: Roboto;
                font-size: 12px;
                font-weight: 500;
                line-height: 14px;
                text-align: center;
                display: flex;
                align-items: center;
                letter-spacing: normal;
                /* 暗色/文字/Text_Caption */
                /* 样式描述：次要/辅助信息 */
                color: #686B86;
                overflow: hidden;
                white-space: nowrap;
                width: 50px;
                transition: all 0.3s ease;
            }
        }
        .head-bottom-logo {
            width: 100%;
            overflow: hidden;
            transition: all 0.3s ease;
            p{
                font-family: Roboto;
                font-size: 12px;
                font-weight: normal;
                line-height: 14px;
                text-align: center;
                display: flex;
                align-items: center;
                letter-spacing: normal;
                /* 暗色/文字/Text_Caption */
                /* 样式描述：次要/辅助信息 */
                color: #686B86;
                margin-bottom: 8px;
                white-space: nowrap;
            }
        }
        

    }
    
}

.home_page-head-close {
    width: 80px;
    .home_page-head-top {
        .home_page-logo {
            padding: 0 5px;
           
            .home_page-logo-img-text-overflow {
                width: 0px;
            }
        }
        .home_page-menu-list{
            li p {
                width: 0px;

            }
            li:hover {
                width: 96px;
                p {
                    width: 50px;
                }
            }
         }
    }

    .home_page-head-bottom {
        .user-avatar {
            .head-name {
                width: 0px;
            }
        }
        .head-bottom-logo {
            width: 0;

        }
    }
}